import msg from '../../model/msg.js';
import WeCropper from './wecropper.js';

const device = wx.getSystemInfoSync();

export class Cropper {
  private Context: any;
  private Options = {
    id: 'cropper',
    src: '',
    targetId: 'targetCropper',
    pixelRatio: device.pixelRatio,
    width: device.windowWidth,
    height: device.windowHeight,
    scale: 2.5,
    zoom: 8,
    cut: {
        x: (device.windowWidth - 300) / 2,
        y: (device.windowHeight - 300) / 2,
        width: 300,
        height: 300
    },
    boundStyle: {
        color: '#0066ff',
        mask: 'rgba(0,0,0,0.8)',
        lineWidth: 1
    }
  };
  constructor(file: any) {
    this.Options.src = file;
    this.Context = new WeCropper(this.Options);
    this.Context
    .on('ready', (ctx: any) => {
      console.log(`wecropper is ready for work!`)
    })
    .on('beforeImageLoad', (ctx: any) => {
        console.log(`before picture loaded, i can do something`)
        console.log(`current canvas context:`, ctx)
        msg.Loading();
    })
    .on('imageLoad', (ctx: any) => {
        console.log(`picture loaded`)
        console.log(`current canvas context:`, ctx)
        msg.HideLoading();
    })
    .on('beforeDraw', (ctx: any, instance: any) => {
        console.log(`before canvas draw,i can do something`)
        console.log(`current canvas context:`, ctx)
    })
  }
  /**
   * @function 获取实例
   */
  public getCropper = () => {
    return {
      context: this.Context,
      options: this.Options,
    }
  }
}